<template>
	<view>
		<input type="text" v-model="userId" placeholder="请输入用户的id"></input>
		<button @click="getSocket">点击链接socket对象</button>
		
		<input type="text" v-model="mess" placeholder="请输入消息"></input>
		<button @click="sendmess">点击发送</button>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';

	// data中定义对象
 	const ws =  ref() // WebSocket 实例
	const userId= ref('')  // 用户id
	const mess = ref('')
	    
	    
	//链接socket
	function getSocket() {
	    // 注意25就是以后登录后的用户的真实id即可
	    ws.value = new WebSocket("ws://localhost:9403/myws/"+userId.value);
	    // 监听 WebSocket 打开事件
	    ws.value.onopen = () => {
	        console.log('WebSocket 已连接');
	        // 连接成功后可以发送数据
	        ws.value.send('Hello, WebSocket!');
	    }
	
	    // 监听 WebSocket 消息事件
	    ws.value.onmessage = (event) => {
	        const data = event.data;
	        console.log('收到 WebSocket 消息:', data);
	        // 处理接收到的数据
	    }
	}
	
	// 发送消息到 WebSocket 服务器
	function sendmess(){
		ws.value.send(mess.value)
	}
	
	// 关闭 WebSocket 连接
	function closeWebSocket() {
	  if (ws.value) {
	    ws.value.close();
	  }
	}
</script>

<style>
	       
</style>
